<script setup lang="ts">
import SafeTopContainer from '@/components/SafeTopContainer/SafeTopContainer.vue'
import { ref } from 'vue'

const activeIndex = ref<string[]>(['1', '2', '3'])

const faqs = [
  {
    question: '柠檬查出险是什么服务？',
    id: '1',
    answer: '柠檬查出险可快速查询车辆历史出险记录，帮助判断事故车、理赔记录等。',
  },
  {
    question: '服务是否支持全国车辆？',
    id: '2',
    answer: '目前支持全国绝大多数车牌，包括新车、外地车等。',
  },
  {
    question: '购买后多久可以使用？',
    id: '3',
    answer: '服务通常在支付完成后1分钟内生效，具体时间以订单状态为准。',
  },
]
</script>

<template>
  <safe-top-container :padding-bottom="15" :show-bg-color="true" bg-color="#fff">
    <wd-navbar left-arrow custom-class="!bg-transparent" title="帮助与反馈" :bordered="false" @click-left="navigateBack" />
  </safe-top-container>
  <div class="bg-gray-50 p-4 space-y-4">
    <h2 class="text-lg text-gray-800 font-bold">
      常见问题
    </h2>
    <wd-collapse v-model="activeIndex">
      <wd-collapse-item v-for="(faq, index) in faqs" :key="index" :title="faq.question" :name="faq.id">
        <div class="text-sm text-gray-600">
          {{ faq.answer }}
        </div>
      </wd-collapse-item>
    </wd-collapse>
  </div>
</template>

<style scoped>

</style>
